<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            display: block;
        }

        span img {
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            margin-top: 20px;
        }

        .active {
            border: 1px solid red;
        }

        a {
            cursor: default;
        }
    </style>
    <script src="../../global.js"></script>

</head>
<body>

<p>---------------------------</p>
<p>---------------------------</p>

<form>
    <input type="text" id="yz"><span id="yzm"></span><br>
    <input type="button" value="验证" id="sub">
</form>


<input type="file" id="fi">

<img width="200px" height="100px" src="img/1.jpg" id="img">
<input type="button" value="上一张" id="perv">
<input type="button" value="下一张" id="next">
<input type="button" value="隐藏" id="btn">
<span><img class="show active" src="img/1.jpg">
<img class="show" src="img/2.jpg">
<img class="show" src="img/3.jpg">
<img class="show" src="img/4.jpg">
<img class="show" src="img/5.jpg"></span>
<div>-----------------------------------------</div>
<p>-----------------------------------------</p>

<input id="c_1" class="check_box" type="checkbox" name="item">1<br>
<input id="c_2" class="check_box" type="checkbox" name="item">1<br>
<input id="c_3" class="check_box" type="checkbox" name="item">1<br>
<input id="c_4" class="check_box" type="checkbox" name="item">1<br>
<input id="c_5" class="check_box" type="checkbox" name="item">1<br>
<input id="c_6" class="check_box" type="checkbox" name="item">1<br>
<input id="c_7" class="check_box" type="checkbox" name="item">1<br>

<input type="button" value="全选" class="all_x">
<input type="button" value="全不选" class="all_n">
<input type="button" value="反选" class="btn">
<input type="text" id="txt"><span id="erro"></span>

<script>

    var img = document.getElementById('img');
    img.style.display = 'block';
    var show_img = document.getElementsByClassName('show');
    var i = 1;
    for (let j = 0; j < show_img.length; j++) {
        show_img[j].onmouseover = function () {
            show_img[0].classList.remove('active');
            i = j + 1;
            img.setAttribute('src', 'img/' + (j + 1) + '.jpg');
            this.classList.add('active');
        }
        show_img[j].onmouseout = function () {
            this.classList.remove('active');
        }

    }

    document.getElementById('perv').onclick = function () {
        i--;
        if (i < 1 || i > 5) {
            i = 5;
        }
        console.log(i);
        img.setAttribute('src', 'img/' + i + '.jpg');
    }
    document.getElementById('next').onclick = function () {
        i++;
        if (i < 1 || i > 5) {
            i = 1;
        }
        img.setAttribute('src', 'img/' + i + '.jpg');
    }
    document.getElementById('btn').onclick = function () {
        console.log(img.style.display == 'block');

        if (img.style.display == 'block') {
            img.style.display = 'none';
            this.value = '显示';
        } else {
            img.style.display = 'block';
            this.value = '隐藏';
        }

    }

    /*多选框*/
    var item = document.getElementsByName('item');
    var allx = document.getElementsByClassName("all_x")[0];
    allx.onclick = function () {
        xuan('qx');
    }
    $('all_n').onclick = function () {
        xuan('bx');
    }

    $('btn').onclick = function () {
        xuan('fx');
    }

    function xuan(check) {
        for (let j = 0; j < item.length; j++) {
            switch (check) {
                case 'fx':
                    if (item[j].checked == false) {
                        item[j].checked = true;
                    } else {
                        item[j].checked = false;
                    }
                    break;
                case 'qx':
                    item[j].checked = true;
                    break;
                case 'bx':
                    item[j].checked = false;
                    break;
            }
        }
    }

    function $(cname) {
        return cname == "" ? null : document.getElementsByClassName(cname)[0];
    }

    var txt = document.getElementById("txt");
    var sp = document.getElementById('erro');
    txt.onblur = function () {
        var text = this.value;
        console.log(isNaN(text));
        if (!isNaN(text)) {
            sp.innerHTML = "输入不正确";
        }
    }
    txt.onfocus = function () {
        var text = this.value;
        console.log(isNaN(text));
        if (!isNaN(text)) {
            sp.innerHTML = "请输入成绩";
        }
    }
    /*图片上传检测*/
    var fi = document.getElementById('fi');
    fi.onchange = function () {
        //获取文件路劲
        var psth = this.value;
        console.log(psth);
        //找到.的索引位置
        var loc = psth.lastIndexOf('.');
        //截取字符串
        var zhi = psth.substr(loc);
        //转小写
        var la = zhi.toLowerCase();

        if (la === '.jpg' || la === '.png') {
            alert('上传成功')
        } else {
            alert('上传失败')
        }
        console.log(la);
    }
    /*验证码*/
    var yz = document.getElementById('yz');
    var sub = document.getElementById('sub');
    var yzm = document.getElementById("yzm");
    var syz = randomnum(4);
    yzm.innerHTML = syz;
    sub.onclick = function () {
        var val = yz.value.toUpperCase();//转大写
        if (val == syz) {
            // alert("成功")
            window.location.href = "https://www.runoob.com/js/js-ex-objects.html";
        } else {
            yz.value = "";
            syz = randomnum(4);

            alert("失败")
            yzm.innerHTML = syz;
        }
    }
</script>
</body>
</html>